<!-- 文章/视频搜索 -->
<template>
  <ContainerSlot>
    <template slot="searchModule">
      <SearchForm></SearchForm>
    </template>
    <template slot="operationModule">
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
    </template>
    <template slot="contentModule">
      <Table :propList="propList" :listData="tableData">
        <template slot="operation">
          <el-button type="info" plain>信息按钮</el-button>
          <el-button type="warning" plain>警告按钮</el-button>
        </template>
      </Table>
    </template>
    <template slot="footerModule">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        background :page-size="pageSize" :page-sizes="[10, 20, 30]" layout=" prev, pager, next, jumper" :total="total">
      </el-pagination>
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table },
  data () {
    return {
      total: 100,
      currentPage: 2,
      pageSize: 10,
      propList: [
        { prop: "areaName", label: "区域名称", minWidth: "80" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { prop: "areaTypeStr", label: "区域类型" },
        { label: "操作", minWidth: "180", slotName: "operation" },
      ],
      tableData: [
        {
          areaName: '地球',
          areaTypeStr: '陆地'
        },
        {
          areaName: '地球',
          areaTypeStr: '陆地'
        }
      ]
    }
  },
  methods: {
    handleCurrentChange (e) {
      console.log(e)
    },
    handleSizeChange (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped></style>
